<template>
	<div class="inst clear" ref="box">
		<div class="inst_left fl">
			<div class="inst_tit">用药公式</div>
			<div class="inst_lcon">
				<el-tree
					:props="tree"
					:load="loadNode"
					lazy
					highlight-current
					@node-click="treeClick">
				</el-tree>
			</div>
		</div>
		<div class="inst_right">
			<div class="inst_tit">公式信息 - {{classname}}</div>
			<div class="select_btn">
				<el-input v-model="keyword" placeholder="请输入公式名称" class="select_input"></el-input>
				<el-button type="primary" @click="searchFun">查询</el-button>
				<el-button type="primary" @click="clearFun">重置</el-button>
			</div>
			<div class="inst_rcon">
				<div v-html="content" ref="content" class="fc_content_body_calc"></div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				tree: {
					label: 'text',
					children: 'ChildNodes',
					isLeaf:'isLeaf'
				},
				keyword:"",
				classid:"",
				classname:"未选择公式",
				content:""
			}
		},
		mounted(){
			var that=this;
			setTimeout(function(){
				that.createScript()
			},60)
		},
		methods:{
			async loadNode(node,resolve) {
				var data=node.level === 0?{}:{parentId:node.data.id}
				let res = await this.$kb.FormulaTree(data);
				for(var i=0;i<res.data.length;i++){
					res.data[i].isLeaf=!res.data[i].hasChildren;
				}
				return resolve(res.data);
			},
			treeClick(node){
				this.classname=node.text;
				if(node.isLeaf){
					this.classid=node.id;
					this.keyword = "";
					this.getList();
				}
			},
			async getList (type) {
				var data={}
				if(type){
					data.keyword=this.keyword;
				}else{
					data.classid=this.classid;
				}
				let res=await this.$kb.FormulaList(data)
				if(res.code == 200 && res.data.length>0){
					let ccontent=res.data[0].Cal_Content?res.data[0].Cal_Content:"";
					let fcontent=res.data[0].Fc_Content?res.data[0].Fc_Content:"";
					let cjs=res.data[0].Cal_Js?res.data[0].Cal_Js:"";
					this.content = ccontent+fcontent;
					this.createJs(cjs);
				}else{
					this.content ="<div></div>";
				}
			},
			createJs(js){
				this.$nextTick(()=>{
					var ele = document.createElement("script");
					ele.innerHTML=js;
					this.$refs.content.append(ele)
				})
			},
			createScript(){
				this.$nextTick(()=>{
					var ele = document.createElement("script");
					ele.innerHTML=`function DealWithVaule(value) {
								return value.replace(/。/g, '.').replace(/．/g, '.').replace(/[０１２３４５６７８９]/g, function (v) { return v.charCodeAt(0) - 65296; }).replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/[^\d.]/g, '').replace(/^\./g, '').replace(/\.{2,}/g, '.');
							}

							function byId(id) {
								return document.getElementById(id);
							}

							function byName(name) {
								return document.getElementsByName(name);
							}

							function getScoreByObj(obj) {
								var score = 0;
								for (var i = 0; i < obj.length; i++) {
									if (obj[i].checked) {
										score += parseInt(obj[i].value);
									}
								}
								return score;
							}

							function getScoreByArrName(arr) {
								var score = 0;
								for (var i = 0; i < arr.length; i++) {
									var obj = byName(arr[i]);
									for (var j = 0; j < obj.length; j++) {
										if (obj[j].checked) {
											score += parseInt(obj[j].value);
										}
									}
								}
								return score;
							}
							function getScoreByArrName_1(arr) {
								var score = 0;
								for (var i = 0; i < arr.length; i++) {
									var obj = byName(arr[i]);
									for (var j = 0; j < obj.length; j++) {
										if (obj[j].checked) {
											score += parseFloat(obj[j].value);
										}
									}
								}
								return score;
							}

							function getRadioCheckedValue(objarr) {
								var value = "";
								for (var j = 0; j < objarr.length; j++) {
									if (objarr[j].checked) {
										value = objarr[j].value;
										break;
									}
								}
								return value;
							}

							function getCheckBoxCheckedCount(obj) {
								var count = 0;
								for (var i = 0; i < obj.length; i++) {
									if (obj[i].type == "checkbox" && obj[i].checked == true) {
										count++;
									}
								}
								return count;
							}

							function FormatNumber(srcStr, nAfterDot) {
								var srcStr, nAfterDot;
								var resultStr, nTen;
								srcStr = "" + srcStr + "";
								strLen = srcStr.length;
								dotPos = srcStr.indexOf(".", 0);
								if (dotPos == -1 && nAfterDot > 0) {
									resultStr = srcStr + ".";
									for (i = 0; i < nAfterDot; i++) {
										resultStr = resultStr + "0";
									}
								} else {
									if ((strLen - dotPos - 1) >= nAfterDot) {
										nAfter = dotPos + nAfterDot + 1;
										nTen = 1;
										for (j = 0; j < nAfterDot; j++) {
											nTen = nTen * 10;
										}
										resultStr = Math.round(parseFloat(srcStr) * nTen) / nTen;
									} else {
										resultStr = srcStr;
										for (i = 0; i < (nAfterDot - strLen + dotPos + 1) ; i++) {
											resultStr = resultStr + "0";
										}
									}
								}
								return resultStr;
							}
							function _containerChange(containerIndex) {
								for (var i = 0; i < c_select.options.length; i++) {
									var obj = document.getElementById("container_" + i);
									if (obj) {
										if (i == containerIndex) {
											obj.style.display = 'block';
										} else {
											obj.style.display = 'none';
										}
									}
								}
							}`;
					this.$refs.box.append(ele)
				})
			},
			searchFun(){
				this.getList(true)
			},
			clearFun(){
				this.classid="";
				this.keyword = "";
				this.classname="未选择公式";
				this.content=""
			}
		}
	}
</script>

<style>
	.fc_content_body_desc{color:#666;font-size:14px;line-height:180%;font-family:Arial,宋体;text-decoration:none;width:100%;padding:10px}.fc_content_body_desc p{color:#666;font-size:14px;line-height:180%;font-family:Arial,宋体;text-decoration:none;margin:0;word-break:break-all}.fc_content_body_desc td{color:#666;font-size:14px;line-height:180%;font-family:Arial,宋体;text-decoration:none;margin:0;word-break:break-all}.fc_content_body_desc span{color:#666;font-size:14px;line-height:180%;font-family:Arial,宋体;text-decoration:none;margin:0;word-break:break-all}.fc_content_body_desc .mc_fc_table{border:0;border-collapse:collapse}.fc_content_body_desc .mc_fc_table td{border:solid 1px #BBB;padding:3px 5px 3px 5px}.fc_content_body_desc .mc_fc_table{border:0;border-collapse:collapse}.fc_content_body_desc .mc_fc_table td{border:solid 1px #BBB;padding:3px 5px 3px 5px}.fc_content_body_desc .mc_fc_table td td{border:0;padding:0}.fc_content_body_desc .trScore{font-weight:bold;background-color:#E9E9E9}.fc_content_body_calc{color:#666;font-size:14px;line-height:180%;font-family:Arial,宋体;text-decoration:none;width:100%}.fc_content_body_calc .mcdex_fc_mobile_body{color:#666;font-size:14px;line-height:180%;font-family:Arial,宋体;text-decoration:none;width:80%;margin-left:30px;margin-bottom:30px;padding-top:60px;padding-bottom:30px;padding-left:30px;padding-right:30px;border-top:solid 3px #00A0EA;border-left:solid 1px #DDD;border-right:solid 1px #DDD;border-bottom:solid 1px #DDD;background-color:#F0F4F9;background-image:url('../../../img/calc_logo.gif');background-position:15px top;background-repeat:no-repeat}.fc_content_body_input_radio,.fc_content_body_input_checkbox{color:#666;font-size:50px;font-family:Arial,宋体;text-decoration:none}.fc_content_body_input_number,.fc_content_body_input_text{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;color:#666;font-size:14px;font-family:Arial,宋体;text-decoration:none;background-color:#FFF;width:100%;height:28px;padding:5px;margin-bottom:10px}.fc_content_body_calc .mcdex_fc_mobile_content{color:#666;font-size:14px;line-height:180%;font-family:Arial,宋体;text-decoration:none;margin-bottom:10px}.mcdex_fc_mobile_content select{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;border:0;color:#00A0EA;font-family:微软雅黑,Arial,宋体;text-decoration:none;background-color:#FFF;width:100%;height:28px;padding:5px;margin-bottom:10px}.mcdex_fc_mobile_content table{border:solid 1px #CCC;border-collapse:collapse;margin-bottom:10px;color:#666;font-size:14px;line-height:180%;font-family:Arial,宋体;text-decoration:none;width:100%}.mcdex_fc_mobile_content td{border:solid 1px #CCC;padding:5px;vertical-align:middle;color:#666;font-size:14px;line-height:180%;font-family:Arial,宋体;text-decoration:none}.mcdex_fc_mobile_content td td{border:solid 1px #CCC;padding:5px;vertical-align:middle;border:0;padding:0;color:#666;font-size:14px;line-height:180%;font-family:Arial,宋体;text-decoration:none}.mcdex_fc_mobile_calculate_btn{border-top:solid 1px #DDD;padding-top:20px;margin-top:10px;margin-bottom:0;margin-left:-30px;margin-right:-30px;text-align:center}.mcdex_fc_mobile_calculate_btn a{display:block;text-align:center;background-color:#00A0EA;color:#FFF;font-size:16px;font-family:微软雅黑,Arial,宋体;text-decoration:none;padding:5px 0;margin:15px 0;width:100%;cursor:pointer}.fc_content_body_calc .mcdex_fc_mobile_calculate_btn a:hover{background-color:#0085B2}.mcdex_fc_mobile_result{margin-top:0}.mcdex_fc_mobile_result b{display:block}.mcdex_fc_mobile_result div{color:#00A0EA}
</style>
<style lang="scss" scoped>
	.inst{
		width:100%;
		padding:10px;
		box-sizing:border-box;
		height:calc(100vh - 95px);
		overflow:hidden;
		.inst_tit{
			height: 32px;
			line-height: 32px;
			width: 100%;
			border-bottom: 1px solid #ccc;
			color: #666;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-weight: bold;
			padding-left: 9px;
			font-size: 12px;
			position:absolute;left:0;top:0;
		}
		.inst_left{
			width:200px;
			height:100%;
			border:1px solid #ccc;
			box-sizing:border-box;
			background:#fff;
			border-radius:3px;
			position:relative;
			padding-top:33px;
		}
		.inst_lcon{
			height:calc(100% - 33px);
			width:100%;
			overflow:auto;
		}
		.inst_right{
			margin-left:210px;
			height:100%;
			border:1px solid #ccc;
			box-sizing:border-box;
			background:#fff;
			border-radius:3px;
			position:relative;padding-top:92px;
			.select_btn{
				width:100%;
				height:60px;
				border-bottom:1px solid #DCDCDC;
				line-height:60px;
				position:absolute;left:0;top:33px;
				.select_input{
					width:200px;
					margin-left:10px;
				}
			}
			.inst_rcon{
				width:100%;height:calc(100% - 92px);overflow:auto;
			}
			.inst_list{
				padding:0 10px;overflow:hidden;
				.item{
					width:25%;
					height:50px;
					line-height:50px;
					font-size:14px;
					color:#444;
					border-top:1px solid #DCDCDC;
					cursor:pointer;
					overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
				}
			}
		}
	}
</style>
